<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态数据分页</title>
  <style>
    /* 样式 */
    table {
      border-collapse: collapse;
      margin: 20px auto;
      font-size: 16px;
      text-align: center;
    }

    table th,td {
      border: 1px solid #ccc;
      padding: 10px;
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin: 20px 0;
    }
    .pagination a {
      display: inline-block;
      padding: 5px 10px;
      border: 1px solid #ccc;
      margin-right: 10px;
      margin-left: 10px;
    }
    .pagination a.active {
      background-color: #ccc;
    }
    .pagination button:last-of-type {
      margin-right: 15px;
    }
    .pagination span[id="#numAll"] {
      margin-right: 10px;
    }
    .pagination span {
      padding: 5px 0;
    }
    img {
      width: 24px;
      height: 24px;
    }
  </style>
</head>
<body>
<table id="table">
  <thead>
  <tr>
    <th>/</th>
    <th>部门</th>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  </thead>
  <tbody id="tbody">
  </tbody>
</table>
<div class="pagination">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script>
  $(function() {
    // JSON数据
    $.ajax({
      url: "/getpageToList",
      success: function (datas) {


        var str = datas.records;
        // 每页显示的数据量
        var pageSize = 5;
        // 获取总页数,使用Math.ceil()对页数进行向上取整

        var total = datas.total;

        var pageCount = Math.ceil(total / pageSize);

        // 初始化分页器
        for (var i = 1; i <= pageCount; i++) {
          $(".pagination").append($("<a href='#' data-page='" + i + "'>" + i + "</a>"));
        }
        $(".pagination").append($("<span id='line1'>/</span>"));
        $(".pagination").append($("<span id='line2'>/</span>"));
        $("<span id='#numIndex'>第" + "<span id='numNow'>1</span>" + "条</span>").insertBefore(
                $("#line1"));
        $("<span id='#numAll'>共" + str.length + "条</span>").insertAfter($("#line1"));
        $("<span id='#pageIndex'>第" + "<span id='pageNow'>1</span>" + "页</span>")
                .insertBefore($("#line2"));
        $("<span id='#pageAll'>共" + pageCount + "页</span>").insertAfter($("#line2"));
        // 默认显示第一页
        showPage(1);

        // 分页器点击事件
        $(".pagination a").click(function () {
          $("span").remove("#pageIndex");
          var currentPage = $(this).data("page");
          // console.log($(this).data("page"));
          $("#pageNow").text(currentPage);
          showPage(currentPage);
        });

        // 显示指定页的数据
        function showPage(currentPage) {
          // 清空表格数据和分页器的激活状态
          $("#tbody").empty();
          $(".pagination a").removeClass("active");
          // 根据当前页计算出起始索引和结束索引
          var startIndex = (currentPage - 1) * pageSize;
          var endIndex = startIndex + pageSize;
          console.log(startIndex);
          // 显示当前页的数据
          for (var i = startIndex; i < endIndex && i < str.length; i++) {
            var item = str[i];
            var tr = "<tr><td>" +  item.id + "</<td><td>" + item.dep +
                    "</td><td>" + item.name + "</td><td>" + item.email + "</td>" +
                    "</tr>";
            $("#tbody").append(tr);
            // console.log($("input").index());
          }
          // 单击每条数据前的笑脸可以显示当前数据在数组中的位置
          $("img").click(function () {
            // 每次单击都先将前一次的数据清空
            $("#numNow").empty();
            // 等于起始索引加上图片在当前页的索引加1
            var num = startIndex + $("img").index(this) + 1;
            // var num =$("img").index(this) + 1;
            $("#numNow").text(num);
            // 给当前页对应的分页器添加状态
            $(".pagination a[data-page='" + currentPage + "']").addClass("active");
          })
        }
      },
    })
  });
</script>
</body>
</html>